<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-19 15:40:34
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-19 17:53:04
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>备忘录</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://unpkg.com/vuex@4"></script>
</head>
<body>
	<div id="app">
		<div>
			<h2>备忘录</h2>
			<button @click="clearTodos">清空</button>
			<button @click="beginLoad(true)">action</button>
			<button @click="setLoading(false)">mutation</button>
			{{loading}}
			<ul>
				<li v-for="todo in todos" :key="todo.id">
					{{todo.content}}
					{{todo.status}}
				</li>
			</ul>
			<hr>
			<ul>
				<li v-for="todo in todos_undo" :key="todo.id">
					{{todo.content}}
					{{todo.status}}
				</li>
			</ul>
		</div>
	</div>
	<script>
		let mapState = Vuex.mapState;
		let mapGetters = Vuex.mapGetters;
		let mapMutations = Vuex.mapMutations;
		let mapActions = Vuex.mapActions;

		let app = Vue.createApp({
			data(){
				return {
					name:"状态机"
				}
			},
			// 计算属性
			computed:{  //state/getters
				/*
				todos(){
					return this.$store.state.todos;
				},
				todos_undo(){
					return this.$store.getters.todos_undo;
				},
				loading(){
					return this.$store.state.loading;
				}*/	
				...mapState("todo",["todos","loading"]),				//等价于
				/*...{
					todos(){
					return this.$store.state.todos;
				},
				loading(){
					return this.$store.state.loading;
				}
				}
				*/
				...mapGetters("todo",["todos_undo"])
			},
			methods:{  //mutations actions
				...mapActions("todo",["beginLoad","clearTodos"]),
				...mapMutations("todo",{
					"setLoading":"SET_LOADING"
				})
				/*
				clearTodos(){
					this.$store.dispatch("clearTodos")
				},
				// 修改loading属性
				setLoading(){
					this.$store.commit("SET_LOADING",true)
				},
				beginLoad(){
					this.$store.dispatch("beginLoad",false)
				}
				*/
			}
		});

		let todoStore = {
			namespaced:true,
			// 1.状态
			state: function(){
				return {
					// {id,content:"",status:"未完成"}
				todos: [
					{ id: 1, content: "吃大餐", status: "完成" },
					{ id: 2, content: "看电影", status: "未完成" }
				],
				loading: false
				}
			},
			// 2.获取器
			getters: {
				todos_undo: function (state) {
					return state.todos.filter(item => item.status === "未完成")
				}
			},
			// 3.突变
			mutations: {
				SET_TODOS(state, payload) {
					state.todos = payload;
				},
				SET_LOADING(state, payload) {
					state.loading = payload;
				},
			},
			// 4.action异步操作
			actions: {
				clearTodos(context, param) {
					setTimeout(() => {
						//触发突变 action -> mutation
						context.commit('SET_TODOS', [])
						alert(1)
					}, 1000)
				},
				beginLoad(context, param) {
					setTimeout(() => {
						context.commit('SET_LOADING', param)
					}, 1000)
				}
			}
		}
		let userStore = {
			namespaced: true,
			state:function(){
				return {
					info:{},
					token:""
				}
			}
		}
		//创建状态机
		let store = Vuex.createStore({
			modules:{
				todo:todoStore,
				user:userStore,
			}
		})

		// console.log(store.state);
		// console.log(store.getters);
		// store.commit('SET_TODOS',[])    //提交突变
		// store.dispatch("clearTodos")			//分发动作
		// alert(JSON.stringify(store.state));


		//安装插件
		app.use(store)

		app.mount("#app")

		
	</script>
</body>
</html>